<template>
  <div class="container">

    <div class="navigation" style="width:240px" >

      <div class="header" >
        <img src="../../public/static/img/升级中心.png" alt="" style="width: 20px;height: 20px;margin-right: 10px">
        <span>基础设施管理中心</span>
      </div>

      <el-aside class="aside">
        <el-menu :default-active="this.activeMenu"
                 class="el-menu-vertical-demo"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#00BFFF"
                 router>

          <template v-for="item in menus">
            <MenuRouter  :key="item.path" :item="item" v-if="!item.hidden" :active-menu="activeMenu"/>
          </template>

        </el-menu>
      </el-aside>

    </div>

    <div class="flex flex-col w-full h-full">


      <div class="flex flex-row justify-end items-center w-full pr-10 bg-green-400 text-white" style="height: 70px; background: linear-gradient(180deg, dodgerblue 0%, #00BFFF 100%);">

        <div class="flex flex-row justify-end items-center">
          <el-tooltip class="item cursor-pointer" effect="dark" content="切换环境版本" placement="top">
            <img src="../../public/static/img/切换版本.svg" alt="" class="w-7 h-7 mr-2.5 cursor-pointer" @click.stop="switchServerUrl">
          </el-tooltip>
          <span>当前环境：{{ envTitle }}</span>
        </div>

<!--        <a class="ml-6" href="javascript:location.href='/sso/login?back=' + encodeURIComponent(location.href);">登录</a>-->

      </div>

      <el-main class="el-main">
        <el-card class="el-card">
          <!-- 路由出口，用于渲染匹配到的组件 -->
          <router-view ></router-view>
        </el-card>
      </el-main>

    </div>

  </div>

</template>
<script>
import MenuRouter from '../components/MenuRouter.vue'
import eventBus from '@/common/uilts/eventBus'
import store from '@/store'
import { ElMessage } from 'element-plus'
export default {
  components: { MenuRouter },
  data () {
    return {
      menus: [],
      envTitle: '开发环境'
    }
  },
  created () {
    this.menus = [...this.$router.options.routes] // 得到路由信息，就是index.js文件里面的路由信息可以打看查看
    console.log(this.menus)
  },
  computed: {
    activeMenu () {
      // 在<router-view>跳转变化时实时计算得到相应值（最新页面path）
      const route = this.$route
      // 从一个对象(route)中取出几个属性(meta, path, name, menuType)组成新的对象(routeInfo)
      const { meta, path, name, menuType, ...routeInfo } = route
      eventBus.emit('activeMenu', path)
      console.log('Active Menu Info: ', routeInfo)
      console.log(`EventBus Emit [activeMenu] -> [${path}]`)
      return path
    }
  },
  methods: {
    switchServerUrl () {
      if (this.envTitle === '开发环境') {
        this.envTitle = '生产环境'
        store.commit('setServerUrl', 'http://120.26.161.107:8090/updateApp')
        ElMessage.success('已切换至生产环境！')
      } else {
        this.envTitle = '开发环境'
        store.commit('setServerUrl', 'http://localhost:3577')
        ElMessage.success('已切换至开发环境！')
      }
      // 刷新当前页面
      // window.location.reload()
    }
  }
}
</script>
<style scoped>

.container{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.header{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  min-height: 70px;
  font-size: 16px;
  letter-spacing: 2px; /* 增加字符间距 */
  color: #FFFFFF;
  background: linear-gradient( 180deg, dodgerblue 0%, #00BFFF 100%);
}

.navigation {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.aside {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.el-menu-vertical-demo {
  height: 100%;
}

/* 设置左边导航栏和顶部菜单不对齐的方法 */
.el-menu {
  border-right-width: 0;
}

span {
  margin-left: 4px;
}

.el-main {
  width: 100%;
  height: 80%;
  padding: 0 !important;/*使用!import提高样式优先级*/
  background: #F6F6F6;
}

.el-card{

  margin: 15px;
  padding: 10px;
}

</style>
